<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="展开更多" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
				<tm-sheet :shadow="24" :padding="[0, 0]" color="blue">
					<tm-translate>
						<tm-more iconColor="white" bgColor="blue">
							<view class="text-size-n pa-24">
								以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
								列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
								单元格颜色的控制。超过宽度自动横向拖动。
								<tm-images src="https://picsum.photos/300"></tm-images>
							</view>
						</tm-more>
					</tm-translate>
				</tm-sheet>
				<tm-sheet :shadow="24" :padding="[0, 0]">
					<tm-more :isRemovBar="true">
						<view class="text-size-n pa-24">
							展开后，底下的更多将不再显示-----以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
							列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
							单元格颜色的控制。超过宽度自动横向拖动。
						</view>
					</tm-more>
				</tm-sheet>
				<tm-sheet :shadow="24" :padding="[0, 0]" color="blue">
					<tm-more iconColor="white" bgColor="blue">
						<template v-slot:default>
							<view class="text-size-n pa-24">
								以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：
								列宽，单元格宽。列表颜色，横向颜色，单元格颜色的控制。超过宽度自动横向拖动。以下示例演示如如何控制：列宽，单元格宽。列表颜色，横向颜色，
								单元格颜色的控制。超过宽度自动横向拖动。
								<tm-images src="https://picsum.photos/300"></tm-images>
							</view>
						</template>
						<template v-slot:more="{ data }">
							<text class="text-white">{{ data ? '收缩更多' : '展开更多' }}</text>
						</template>
					</tm-more>
				</tm-sheet>
				<tm-sheet :shadow="24" :padding="[0, 0]">
					<tm-more><view class="text-size-n pa-24">没有超过指定高度不显示展开更多按钮条</view></tm-more>
				</tm-sheet>
			</view>
		</template>
	</tm-fullView>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmTranslate from "@/tm-vuetify/components/tm-translate/tm-translate.vue"
	import tmMore from "@/tm-vuetify/components/tm-more/tm-more.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmTranslate,tmMore,tmImages},
	data() {
		return {};
	},
	methods: {}
};
</script>

<style></style>
